<template>
  <section class="company">
    <div class="contact">
      <div class="storey wrap-content">
        <div class="title">
          订购热线<span>ORDER HOTLINE</span>
        </div>
        <div class="hotline">
          <div class="hotline-item">
            <div>
              <span class="name">
                营销部王先生
              </span>
              <span class="email">
                邮箱：wangzhangming@liangzhun.com.cn
              </span>
              <span class="phone">
                电话：13262767406
              </span>
            </div>
          </div>
          <div class="hotline-item">
            <div>
              <span class="name">
                营销部祁女士
              </span>
              <span class="email">
                邮箱：alinaqi@liangzhun.com.cn
              </span>
              <span class="phone">
                电话：18616202758
              </span>
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 40px;"></div>
        <div class="hotline-tips">
          上海总部座机:(021) 64079319
        </div>
        <div class="hotline-tips">
          上海总部邮箱:customerservice@liangzhun.com.cn
        </div>
        <div class="title">
          公司地址<span>COMPANY ADDRESS</span>
        </div>
        <div class="address">
          <div class="address-item">
            <span class="name"
                  style="padding-right: 40px;">
              上海总部
            </span>
            <span class="loction">
              上海市徐汇区古美路1520号漕河泾中心A座1103室
            </span>
          </div>
          <div class="address-item">
            <span class="name"
                  style="padding-right: 40px;">
              上海工厂
            </span>
            <span class="loction">
              上海市金山工业区天工路857号2幢2层
            </span>
          </div>
          <div class="address-item">
            <span class="name">
              杭州研发中心
            </span>
            <span class="loction">
              浙江省杭州市江干区东宁路619号东恒大厦1003室
            </span>
          </div>
          <div class="address-item">
            <span class="name">
              武汉研发中心
            </span>
            <span class="loction">
              湖北省武汉市东湖高新区高新大道666号光谷生物城B5栋6楼
            </span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.contact {
  .title {
    font-size: 36px;
    border-bottom: 1px solid #276db2;
    color: #0159ac;
    padding: 50px 0 20px 0;

    span {
      margin-left: 5px;
      font-size: 16px;
    }
  }

  .contant {
    padding: 10px 0;
    font-family: NotoSansHans-Light;
    font-size: 16px;
    font-weight: normal;
    color: #595959;
    line-height: 36px;
    text-indent: 2em;
  }

  .hotline {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-column-gap: 20px;
    padding: 20px 20px 0 0;

    &-item {
      background-color: #e9eaee;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 50px 0;

      .name {
        font-size: 20px;
        color: #276db2;
        text-align: center;
      }

      span {
        display: block;
        font-size: 16px;
        line-height: 30px;
        color: #595959;
      }
    }
  }

  .hotline-tips {
    color: #484848;
    font-size: 24px;
    text-align: center;
  }

  .address {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    padding: 20px 0;

    &-item {
      background: #e9eaee;
      padding: 50px 40px;
    }

    .name {
      padding-top: 6px;
      color: #276db2;
      font-size: 20px;
      text-align: center;
      background: url('~@/assets/imgs/content/location-p.png') no-repeat 0px 0px/24px
        30px;
    }

    span {
      display: block;
      font-size: 16px;
      color: #595959;
    }

    .loction {
      margin-top: 10px;
      line-height: 25px;
    }
  }
}
</style>